<template>
	<div class="more_channels">
		<h1>
			<i></i><span>推荐频道</span>
		</h1>
		<div class="more_channels_list">
			<ul>
				<li v-for="(item, index) in channelData" v-if="index < 7">
					<router-link :to="item.url">
						{{item.title}}
					</router-link>
				</li>
			</ul>
			<ul>
				<li v-for="(item, index) in channelData" v-if="index >= 7">
					<router-link :to="item.url">
						{{item.title}}
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "MoreChannels",
		props:["channels"],
		data: function(){
			return {
				channelData:this.channels
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	@baseBF:100/1%;
	.more_channels{
		background-color: #fff;
		margin-top:10/@base;
		h1{
			color:#FF0000;
			padding:20/@base;
			border-bottom: 1/@base solid #ccc;
			line-height: 30/@base;
			i{
				width:5/@base;
				height:24/@base;
				background-color: #FF0000;
				display:inline-block;
				overflow: hidden;
				margin-right:10/@base;
				vertical-align: middle;
			}
			span{
				vertical-align: middle;
			}
			font-size:24/@base;
		}
		div{
			&.more_channels_list{
				padding:10/@base;
				ul{
					display:flex;
					margin:5/@base 0;
					li{
						width:@baseBF/7;
						text-align:center;
						font-size:24/@base;
						a{
							display:block;
							width:100%;
							color:#000;
						}
					}
				}
			}
		}
	}
</style>
